<template>
  <div class="app-container">
    <div class="app-title">
      <span>单位编辑卡号</span>
    </div>
    <el-row>
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-57px"
          >
            <el-radio-button
              label="waitUpdate"
              name="isWaitModify"
            ><img style="height:12px;" :src="allimgSrc">异常卡号</el-radio-button>
            <!-- <el-radio-button
              label="waitAudit"
              name="isWaitAudit"
            ><img style="width:16px; height:16px;" :src="Processedimg">待审核</el-radio-button>
            <el-radio-button
              label="audit"
              name="isAudit"
            ><img style="width:16px; height:16px;" :src="Untreatedimg">已审核</el-radio-button> -->
            <el-radio-button
              label="submit"
              name="isSubmit"
            ><img style="height:12px;" :src="Backimg">已送审</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col style="text-align:right;margin-top:-3px;" :span="16">
          <el-button
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            @click="Query"
          >
            查询
          </el-button>
          <el-button
            v-if="activeName === 'waitUpdate'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            @click="isUpdateBank"
          >
            修改信息
          </el-button>
          <!-- <el-button
            v-if="activeName === 'waitUpdate'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            :loading="isVerifyPassLoading"
            @click="isVerifyPass"
          >
            审核通过
          </el-button> -->
          <!-- <el-button
            v-if="activeName === 'waitAudit'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            :loading="isRevokeUpdateLoading"
            @click="isRevokeUpdate"
          >
            撤销修改
          </el-button> -->
          <!-- <el-button
            v-if="activeName === 'audit'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            :loading="isRevokeVerifyLoading"
            @click="isRevokeVerify"
          >
            撤销审核
          </el-button> -->
          <!-- <el-button
            v-if="activeName === 'waitUpdate'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;width:100px;"
            type="primary"
            :loading="PersonnelLoading"
            @click="Personnel"
          >
            更新人事信息
          </el-button> -->
          <el-button
            v-if="activeName === 'waitUpdate'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            :loading="isSendVerifyFinanceLoading"
            @click="isSendVerifyFinance"
          >
            送审财政
          </el-button>
          <el-button
            v-if="activeName === 'submit'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            :loading="isRevokeVerifyFinanceLoading"
            @click="isRevokeVerifyFinance"
          >
            撤销送审
          </el-button>
        </el-col>
      </div>
    </el-row>

    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid':'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{'height' : treeHeight + 'px'}">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" @getFirstAuthAgencyData="getFirstAuthAgencyData" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids': 'min']">
        <unitEditCardNumberChildren
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          :tree-data="treeData"
          @isRevokeUpdateCallBack="isRevokeUpdateCallBack()"
          @isVerifyPassCallBack="isVerifyPassCallBack()"
          @isRevokeVerifyCallBack="isRevokeVerifyCallBack()"
          @isSendVerifyFinanceCallBack="isSendVerifyFinanceCallBack()"
          @isRevokeVerifyFinanceCallBack="isRevokeVerifyFinanceCallBack()"
          @PersonnelCallBack="PersonnelCallBack()"
        />
      </div>
      <Drag ref="icon" />
    </div>
  </div>
</template>

<script>
import unitEditCardNumberChildren from '@/views/exceptionCardNumberManage/children/unitEditCardNumberChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'FinancialAudit',
  components: { unitEditCardNumberChildren, Drag, AgencyTree },
  data() {
    return {
      Show: false,
      isActive: true,
      treeShow: false,
      PersonnelLoading: false,
      isRevokeUpdateLoading: false,
      isVerifyPassLoading: false,
      isRevokeVerifyLoading: false,
      isSendVerifyFinanceLoading: false,
      isRevokeVerifyFinanceLoading: false,
      timer: '',
      activeName: 'waitUpdate',
      allimgSrc: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/blueselect.png'),
      Untreatedimg: require('@/assets/images/processed.png'),
      Backimg: require('@/assets/images/processed.png'),
      treeHeight: null,
      treeData: ''
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'waitUpdate') {
        this.allimgSrc = require('@/assets/images/select.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
        this.Backimg = require('@/assets/images/processed.png')
      } else if (val === 'waitAudit') {
        this.allimgSrc = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
        this.Backimg = require('@/assets/images/processed.png')
      } else if (val === 'audit') {
        this.allimgSrc = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
        this.Backimg = require('@/assets/images/processed.png')
      } else {
        this.allimgSrc = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
        this.Backimg = require('@/assets/images/blue.png')
      }
    }
  },
  created() {},
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    PersonnelCallBack() {
      this.PersonnelLoading = false
    },
    getFirstAuthAgencyData(data) {
      this.treeData = data
    },
    // 更新人事数据
    Personnel() {
      this.PersonnelLoading = true
      this.$refs.chil.updatePersonnel()
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 查询
    Query() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.query()
      }
    },
    // 修改账户
    isUpdateBank() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.updateBank()
      }
    },
    // 审核通过
    isVerifyPass() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.isVerifyPassLoading = true
        this.$refs.chil.verifyPass()
      }
    },
    isVerifyPassCallBack() {
      this.isVerifyPassLoading = false
    },
    // 撤销修改
    isRevokeUpdate() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.isRevokeUpdateLoading = true
        this.$refs.chil.revokeUpdate()
      }
    },
    isRevokeUpdateCallBack() {
      this.isRevokeUpdateLoading = false
    },
    // 撤销审核
    isRevokeVerify() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.isRevokeVerifyLoading = true
        this.$refs.chil.revokeVerify()
      }
    },
    isRevokeVerifyCallBack() {
      this.isRevokeVerifyLoading = false
    },
    // 送审财政
    isSendVerifyFinance() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.isSendVerifyFinanceLoading = true
        this.$refs.chil.sendVerifyFinance()
      }
    },
    isSendVerifyFinanceCallBack() {
      this.isSendVerifyFinanceLoading = false
    },
    // 撤销送审
    isRevokeVerifyFinance() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.isRevokeVerifyFinanceLoading = true
        this.$refs.chil.revokeVerifyFinance()
      }
    },
    isRevokeVerifyFinanceCallBack() {
      this.isRevokeVerifyFinanceLoading = false
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      if (data && data.isleaf === '1') {
        this.treeData = data
      }
    },
    dragController() {
      this.$refs.icon.dragControllerDiv()
    }
  }
}
</script>

